<template>
  <div class="product-list">
    <div
        v-for="(product, index) in products"
        :key="product.name"
        class="product-item"
        @click="jump(product, props.storeIndex)"
    >
      <img :src="getImage()+product.image" alt="product.name" class="product-image"/>
      <p class="product-name">{{ product.name }}</p>
    </div>
  </div>
</template>

<script setup>
import {defineProps} from 'vue';
import {useRouter} from 'vue-router';
import requestUtil,{getServerUrl} from "@/utils/request.js";

let props = defineProps({
  products: {
    type: Array,
    required: true
  },
  storeIndex: {
    type: Number,
    required: true
  }
});

const router = useRouter();

const jump = (product, storeIndex) => {
  // 使用传递过来的店铺id进行路由跳转
  router.push({
    path: '/storeDetails',
    query: {
      index: storeIndex, // 使用店铺id作为参数
    }
  });
};
const getImage =  () => {
  return getServerUrl()+'media/dishes/';
}
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 50%; /* 每个商品项占据一半的宽度 */
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.product-image {
  width: 150px;
  height: 150px;
  border-radius: 8px; /* 圆角效果 */
}

.product-name {
  margin-top: 5px;
  font-size: 16px;
  color: #333;
}
</style>